<template>
  <div class="virtual-pet-container bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto my-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">宠物互动体验中心</h1>
    
    <div class="game-content space-y-8">
      <!-- 虚拟宠物游戏部分 -->
      <div class="virtual-game-section">
        <div class="section-header bg-purple-600 text-white py-3 px-4 rounded-t-lg flex items-center">
          <i class="fa fa-gamepad mr-2"></i>
          <h2 class="text-xl font-bold">虚拟宠物游戏</h2>
        </div>
        
        <div class="section-content bg-purple-50 rounded-b-lg p-6 border-2 border-t-0 border-purple-100">
          <!-- 游戏介绍 -->
          <div class="intro-section mb-6">
            <h3 class="text-lg font-bold text-purple-700 mb-2">数字世界的陪伴伙伴</h3>
            <p class="text-gray-700 leading-relaxed">
              虚拟宠物游戏是一款旨在提供宠物陪伴体验的互动应用。在这个数字世界里，用户可以领养、照顾和互动自己的虚拟宠物，
              体验养宠的乐趣，同时了解真实宠物的需求和责任。
            </p>
          </div>

          <!-- 游戏概念图 -->
          <div class="game-concept mb-6">
            <h3 class="text-lg font-bold text-purple-700 mb-3 flex items-center">
              <i class="fa fa-paint-brush mr-2"></i> 游戏概念展示
            </h3>
            <div class="bg-white rounded-lg p-4 relative h-72 flex items-center justify-center shadow-sm">
              <div class="absolute inset-0 bg-purple-500/10 rounded-lg flex flex-col items-center justify-center">
                <div class="w-32 h-32 bg-purple-200 rounded-full flex items-center justify-center mb-4">
                  <i class="fa fa-paw text-6xl text-purple-500"></i>
                </div>
                <p class="text-gray-700 text-center">虚拟宠物游戏界面概念图</p>
                <p class="text-gray-500 text-sm mt-2">（游戏开发中，敬请期待）</p>
              </div>
            </div>
          </div>

          <!-- 游戏功能介绍 -->
          <div class="features-section mb-6">
            <h3 class="text-lg font-bold text-purple-700 mb-3 flex items-center">
              <i class="fa fa-star text-yellow-500 mr-2"></i> 游戏功能预览
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="feature-card bg-white rounded-lg shadow-sm p-3 border border-purple-100">
                <h4 class="font-medium text-purple-700 mb-1 flex items-center">
                  <i class="fa fa-heart mr-2 text-purple-500"></i> 宠物领养
                </h4>
                <p class="text-gray-600 text-sm">
                  从多种可爱的虚拟宠物中选择你喜欢的伙伴，开启你的养宠之旅。
                </p>
              </div>
              
              <div class="feature-card bg-white rounded-lg shadow-sm p-3 border border-purple-100">
                <h4 class="font-medium text-purple-700 mb-1 flex items-center">
                  <i class="fa fa-cutlery mr-2 text-purple-500"></i> 日常照料
                </h4>
                <p class="text-gray-600 text-sm">
                  喂食、清洁、玩耍和训练你的虚拟宠物，保持它们的健康和快乐。
                </p>
              </div>

              <div class="feature-card bg-white rounded-lg shadow-sm p-3 border border-purple-100">
                <h4 class="font-medium text-purple-700 mb-1 flex items-center">
                  <i class="fa fa-medkit mr-2 text-purple-500"></i> 健康管理
                </h4>
                <p class="text-gray-600 text-sm">
                  关注宠物的健康状态，及时治疗疾病，学习宠物健康管理知识。
                </p>
              </div>
              
              <div class="feature-card bg-white rounded-lg shadow-sm p-3 border border-purple-100">
                <h4 class="font-medium text-purple-700 mb-1 flex items-center">
                  <i class="fa fa-users mr-2 text-purple-500"></i> 社区互动
                </h4>
                <p class="text-gray-600 text-sm">
                  与其他玩家交流养宠心得，分享宠物成长故事，参与社区活动。
                </p>
              </div>
            </div>
          </div>

          <!-- 虚拟游戏的常见问题和教育内容总结 -->
          <div class="virtual-info-summary bg-white rounded-lg shadow-sm p-5 border border-purple-100">
            <!-- 虚拟游戏常见问题 -->
            <div class="virtual-faq mb-5">
              <h3 class="text-lg font-bold text-purple-700 mb-3 flex items-center">
                <i class="fa fa-question-circle text-purple-500 mr-2"></i> 常见问题
              </h3>
              <div class="space-y-3">
                <div class="faq-item bg-purple-50 p-3 rounded">
                  <h4 class="font-medium text-purple-800 mb-1">游戏会收费吗？</h4>
                  <p class="text-gray-600 text-sm">
                    游戏将采用免费下载+部分内容付费的模式，基本的养宠体验和教育内容都是免费的。
                  </p>
                </div>
                <div class="faq-item bg-purple-50 p-3 rounded">
                  <h4 class="font-medium text-purple-800 mb-1">游戏适合什么年龄段的用户？</h4>
                  <p class="text-gray-600 text-sm">
                    游戏适合7岁以上的所有年龄段用户，针对不同年龄群体设计了相应的内容和教育元素。
                  </p>
                </div>
                <div class="faq-item bg-purple-50 p-3 rounded">
                  <h4 class="font-medium text-purple-800 mb-1">什么时候可以玩到这款游戏？</h4>
                  <p class="text-gray-600 text-sm">
                    我们计划在3个月内推出内测版本，6个月内正式上线。关注我们的官方渠道获取最新消息。
                  </p>
                </div>
              </div>
            </div>
            
            <!-- 虚拟游戏教育与社会责任 -->
            <div class="virtual-education">
              <h3 class="text-lg font-bold text-purple-700 mb-3 flex items-center">
                <i class="fa fa-book text-purple-500 mr-2"></i> 教育与社会责任
              </h3>
              <p class="text-gray-700 text-sm mb-3">
                虚拟宠物游戏不仅仅是一款娱乐应用，它还具有重要的教育意义：
              </p>
              <ul class="list-disc list-inside text-gray-700 space-y-1.5 text-sm">
                <li>帮助用户了解真实宠物的基本需求和照顾方法</li>
                <li>培养责任感和同理心，特别是对儿童用户</li>
                <li>宣传宠物领养和救助的理念</li>
                <li>提供宠物健康和行为知识的普及平台</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 线下门店进行游戏部分 -->
      <div class="offline-game-section">
        <div class="section-header bg-amber-600 text-white py-3 px-4 rounded-t-lg flex items-center">
          <i class="fa fa-map-marker mr-2"></i>
          <h2 class="text-xl font-bold">线下门店进行游戏</h2>
        </div>
        
        <div class="section-content bg-amber-50 rounded-b-lg p-6 border-2 border-t-0 border-amber-100">
          <!-- 线下游戏介绍 -->
          <div class="offline-intro mb-6">
            <p class="text-gray-700 mb-4">
              除了虚拟世界的互动，我们在线下实体门店提供了丰富多彩的宠物互动游戏，让您能够与真实可爱的宠物进行面对面的游戏体验！
            </p>
          </div>
          
          <!-- 实体游戏活动 -->
          <div class="game-activities mb-6">
            <h3 class="text-lg font-bold text-amber-700 mb-3">实体游戏活动</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div class="activity-card bg-white rounded-lg p-3 shadow-sm border-l-4 border-amber-400">
                <h4 class="font-medium text-amber-800 flex items-center">
                  <i class="fa fa-puzzle-piece mr-2 text-amber-500"></i> 宠物益智游戏
                </h4>
                <p class="text-gray-600 text-sm mt-1">
                  与猫咪一起玩益智玩具，训练狗狗完成障碍课程，体验与宠物共同解决问题的乐趣。
                </p>
              </div>
              <div class="activity-card bg-white rounded-lg p-3 shadow-sm border-l-4 border-amber-400">
                <h4 class="font-medium text-amber-800 flex items-center">
                  <i class="fa fa-paint-brush mr-2 text-amber-500"></i> 宠物创意工作坊
                </h4>
                <p class="text-gray-600 text-sm mt-1">
                  参与制作宠物玩具、零食，给宠物设计可爱服装，留下独特的手工纪念品。
                </p>
              </div>
              <div class="activity-card bg-white rounded-lg p-3 shadow-sm border-l-4 border-amber-400">
                <h4 class="font-medium text-amber-800 flex items-center">
                  <i class="fa fa-running mr-2 text-amber-500"></i> 宠物运动互动
                </h4>
                <p class="text-gray-600 text-sm mt-1">
                  在专业指导下与狗狗一起进行飞盘游戏、障碍赛，或与猫咪进行敏捷训练。
                </p>
              </div>
              <div class="activity-card bg-white rounded-lg p-3 shadow-sm border-l-4 border-amber-400">
                <h4 class="font-medium text-amber-800 flex items-center">
                  <i class="fa fa-heart mr-2 text-amber-500"></i> 宠物放松体验
                </h4>
                <p class="text-gray-600 text-sm mt-1">
                  参与宠物按摩课程，学习如何正确抚摸和安抚宠物，享受与宠物的宁静时光。
                </p>
              </div>
            </div>
          </div>
          
          <!-- 游戏体验特色 -->
          <div class="game-experience mb-6">
            <h3 class="text-lg font-bold text-amber-700 mb-3">游戏体验特色</h3>
            <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
              <div class="rounded-lg overflow-hidden h-40 bg-amber-50 flex items-center justify-center mb-3">
                <img src="../asserts/images/chongwu.png" alt="线下宠物游戏" class="w-full h-full object-cover">
              </div>
              <ul class="space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-amber-500 mr-2 mt-0.5"></i>
                  <span class="text-gray-700 text-sm">专业宠物训练师全程指导，确保互动安全</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-amber-500 mr-2 mt-0.5"></i>
                  <span class="text-gray-700 text-sm">定期更换游戏主题，提供新鲜感</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-amber-500 mr-2 mt-0.5"></i>
                  <span class="text-gray-700 text-sm">适合全家人参与的亲子互动游戏</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-amber-500 mr-2 mt-0.5"></i>
                  <span class="text-gray-700 text-sm">可以给喜欢的宠物拍照，记录美好瞬间</span>
                </li>
              </ul>
            </div>
            <div class="flex justify-center">
              <button class="px-6 py-2 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-lg shadow-md transition-colors flex items-center">
                <i class="fa fa-calendar-plus-o mr-2"></i> 预约体验
              </button>
            </div>
          </div>
          
          <!-- 线下游戏的常见问题和教育内容总结 -->
          <div class="offline-info-summary bg-white rounded-lg shadow-sm p-5 border border-amber-100">
            <!-- 线下游戏常见问题 -->
            <div class="offline-faq mb-5">
              <h3 class="text-lg font-bold text-amber-700 mb-3 flex items-center">
                <i class="fa fa-question-circle text-amber-500 mr-2"></i> 常见问题
              </h3>
              <div class="space-y-3">
                <div class="faq-item bg-amber-50 p-3 rounded">
                  <h4 class="font-medium text-amber-800 mb-1">门店游戏活动需要预约吗？</h4>
                  <p class="text-gray-600 text-sm">
                    是的，为了保证最佳体验，我们建议提前通过官方渠道或电话预约您想要参与的活动。
                  </p>
                </div>
                <div class="faq-item bg-amber-50 p-3 rounded">
                  <h4 class="font-medium text-amber-800 mb-1">门店游戏适合什么年龄段的孩子？</h4>
                  <p class="text-gray-600 text-sm">
                    我们的线下活动适合4岁以上儿童参与，12岁以下儿童需要家长陪同。不同活动有不同的年龄建议。
                  </p>
                </div>
                <div class="faq-item bg-amber-50 p-3 rounded">
                  <h4 class="font-medium text-amber-800 mb-1">如何了解附近的门店位置？</h4>
                  <p class="text-gray-600 text-sm">
                    您可以通过我们的官方网站、APP或微信公众号查询全国门店分布，并获取详细的地址和联系方式。
                  </p>
                </div>
              </div>
            </div>
            
            <!-- 线下游戏教育与社会责任 -->
            <div class="offline-education">
              <h3 class="text-lg font-bold text-amber-700 mb-3 flex items-center">
                <i class="fa fa-book text-amber-500 mr-2"></i> 教育与社会责任
              </h3>
              <p class="text-gray-700 text-sm mb-3">
                线下门店游戏活动同样注重教育意义和社会责任：
              </p>
              <ul class="list-disc list-inside text-gray-700 space-y-1.5 text-sm">
                <li>提供真实宠物互动体验，培养正确的宠物相处方式</li>
                <li>通过专业指导，普及科学养宠知识和宠物福利理念</li>
                <li>部分门店设有宠物领养区，促进流浪动物救助工作</li>
                <li>定期举办公益活动，关注特殊群体的宠物疗法体验</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户评价预览 -->
      <div class="testimonials-section bg-blue-50 rounded-xl p-6 shadow-md border-2 border-blue-100">
        <h2 class="text-xl font-bold text-blue-700 mb-4 flex items-center">
          <i class="fa fa-comments text-blue-500 mr-2"></i> 玩家期待之声
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="testimonial-card bg-white rounded-lg p-4 shadow-sm">
            <div class="flex items-center mb-2">
              <div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center mr-2">
                <i class="fa fa-user text-blue-600"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-800">张小姐</h4>
                <div class="flex text-yellow-400 text-xs">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </div>
              </div>
            </div>
            <p class="text-gray-600 text-sm italic">
              "非常期待这款虚拟宠物游戏，希望能在忙碌的生活中体验养宠的乐趣，同时学习更多关于宠物护理的知识。"
            </p>
          </div>
          
          <div class="testimonial-card bg-white rounded-lg p-4 shadow-sm">
            <div class="flex items-center mb-2">
              <div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center mr-2">
                <i class="fa fa-user text-blue-600"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-800">李先生</h4>
                <div class="flex text-yellow-400 text-xs">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-half-o"></i>
                </div>
              </div>
            </div>
            <p class="text-gray-600 text-sm italic">
              "作为一个爱宠人士，我很想通过这种方式向孩子们传授责任感和爱心，希望游戏能兼顾教育和娱乐性。"
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <button class="mt-8 px-6 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors" @click="goBack">
      返回
    </button>
  </div>
</template>

<script>
export default {
  name: 'VirtualPetGame',
  methods: {
    goBack() {
      window.history.back();
    }
  }
}
</script>

<style scoped>
.virtual-pet-container {
  line-height: 1.6;
}

h1 {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

h2 {
  color: #8b5cf6;
}

button {
  cursor: pointer;
}

@media (max-width: 640px) {
  .virtual-pet-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  .feature-card {
    margin-bottom: 1rem;
  }
}
</style>